<template>
  <div class='post'>
    <el-container>
  <el-aside width="280px">
    <div class='recommend-city'>
      <div class='city' @mouseenter='handleSidebar(index)' @mouseleave='leaveSidebar' v-for="(item,index) in cityList" :key="index">
        <div>{{item.type}}</div>
        <span class='el-icon-arrow-right'></span>
        <div class='sidebar' v-if="isShow">
          <div class='sidebar-list' v-for="(item,index) in listContent" :key="index">
            <span class='num'>{{index+1}}</span>
            <span class='citys'>{{item.city}}</span>
            <span class='title'>{{item.desc}}</span>
          </div>
        </div>
      </div>
    </div>
  </el-aside>
  <el-main>
    <el-input
    class='input'
    placeholder="请输入最想去的地方,比如: ' 广州 '"
    v-model="searchvalue">
    <i slot="suffix" class="el-input__icon el-icon-search"></i>
  </el-input>
  <div class='recommend'>
    <span>推荐 :</span>
    <nuxt-link class='jump' to="#">广州</nuxt-link>
    <nuxt-link class='jump' to="#">上海</nuxt-link>
    <nuxt-link class='jump' to="#">北京</nuxt-link>
  </div>
 <div class='strategy'>
  <el-menu class="el-menu-demo" mode="horizontal" text-color='#ffa500'>
  <el-menu-item>推荐攻略</el-menu-item>
</el-menu>
  <el-button type="primary" round><i class="el-icon-edit"></i>写游记</el-button>
 </div>
   <el-pagination
   v-if="total "
  background
  layout="prev, pager, next"
  :total="total"
  @current-change='handleChange'
  >
</el-pagination>
 <div class='article' v-if="item.images.length >= 3 && item.images.length > 1" v-for='(item,index) in postList' :key='index'>
   <h3>{{item.title}}</h3>
   <div class='conten'>{{item.summary}}
   </div>
   <div class='picture'>
     <img :src="image" alt="" v-for="(image,index) in item.images" :key="index">
   </div>
   <div class='option'>
     <div class='left'>
       <span class="el-icon-location-outline"></span>
       <span class='unify'>{{item.cityName}}</span>
       <el-avatar class='unify' size='small' :src="circleUrl"></el-avatar>
       <div class='user'>
         <span>{{item.account.nickname}}</span>
       </div>
       <span class='el-icon-view'></span>
       <span class='unify'>{{item.watch}}</span>
     </div>
      <div class='right'>
        <span v-if="item.like">{{item.like}} 赞</span>
        <span v-else>80赞</span>
      </div>
   </div>
 </div>
 <div class='essay' v-for="(item,index) in postList" :key="index" v-if="item.images.length <= 1"> 
   <div class='essay-img'>
     <img src="https://p3-q.mafengwo.net/s13/M00/41/C4/wKgEaVyaOs2AA9IKAAj8Lg2YzaU64.jpeg?imageMogr2%2Fthumbnail%2F1360x%2Fstrip%2Fquality%2F90" alt="">
   </div>
   <div class='essay-content'>
     <div class='title'>{{item.title}}</div>
     <div class='content'>
      {{item.summary}}
     </div>
     <div class='option'>
     <div class='left'>
       <span class="el-icon-location-outline"></span>
       <span class='unify'>{{item.city.name}}</span>
       <el-avatar class='unify' size='small' :src="circleUrl"></el-avatar>
       <div class='user'>
         <span>{{item.account.nickname}}</span>
       </div>
       <span class='el-icon-view'></span>
       <span class='unify'>{{item.watch}}</span>
     </div>
      <div class='right'>
        <span v-if="item.like">{{item.like}} 赞</span>
        <span v-else>80赞</span>
        <!-- <span>20赞</span> -->
      </div>
   </div>
   </div>
 </div>
  </el-main>
</el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchvalue: '',
      circleUrl:
        'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
      postList: {},
      isShow: false,
      total: '',
      cityList: '',
      listContent: '',
      pageSize: 10,
      pageNum: 1
    }
  },
  methods: {
    handleChange(value) {
      console.log(value)
    },
    loadPost() {
      this.$axios({
        url: '/posts',
        method: 'get'
      }).then(res => {
        console.log(res.data)
        const { data, total } = res.data
        this.total = total
        const start = (this.pageNum - 1) * this.pageSize
        const end = start + this.pageSize
        if (data.length > 0) {
          this.postList = data.slice(start, end)
        }
      })
    },
    getCityList() {
      this.$axios({
        url: '/posts/cities',
        method: 'get'
      }).then(res => {
        // console.log(res.data.data)
        this.cityList = res.data.data
      })
    },
    // 鼠标移入事件
    handleSidebar(index) {
      // console.log(index)
      this.listContent = this.cityList[index].children
      this.isShow = true
    },
    // 鼠标移出事件
    leaveSidebar() {
      this.isShow = false
    },
    // 切换下一页数据
    handleChange(index) {
      // console.log(index)
      this.pageNum = index
      // this.loadPost()
    }
  },
  mounted() {
    this.loadPost()
    this.getCityList()
  }
}
</script>

<style lang='scss' scoped>
.post {
  .el-container {
    // margin-bottom: 40px;
    margin: 0 auto;
    width: 1000px;
  }
}
.el-aside {
  text-align: center;
  padding: 20px 10px;
  .recommend-city {
    border: 1px solid #dddddd;
    .city:hover {
      color: #ffa500;
      cursor: pointer;
    }
    .city {
      padding: 8px 5px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #dddddd;
      &:last-child {
        border-bottom: none;
      }
      div {
        font-size: 14px;
        // color: #333;
      }
      .el-icon-arrow-right {
        width: 30px;
        display: flex;
        justify-content: flex-end;
        font-size: 24px;
      }
      .sidebar {
        position: absolute;
        border: 1px solid #dddddd;
        width: 350px;
        // height: 200px;
        right: 552px;
        background-color: #ffffff;
        z-index: 10;
        top: 80px;
        .sidebar-list {
          display: flex;
          flex: 1;
          align-items: center;
          justify-content: space-around;
          padding: 5px 3px;
          .num {
            color: #ffa500;
            font-size: 24px;
            padding: 0 15px;
          }
          .citys {
            color: #ffa500;
            font-size: 14px;
            padding: 0 15px;
          }
          .title {
            color: #999999;
            flex: 1;
            text-align: left;
          }
        }
      }
    }
  }
}
.el-main {
  color: #333;
  ::v-deep.el-input__inner {
    outline: none;
    border: 3px solid #ffa500;
  }
  .strategy {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .el-input__icon {
    color: #ffa500;
    font-size: 22px;
    font-weight: bold;
  }
  ::v-deep.el-menu-item {
    padding: 0;
    border-bottom-color: #ffa500 !important;
    font-size: 18px;
  }
  .recommend {
    height: 35px;
    display: flex;
    align-items: center;
    font-size: 12px;
    .jump {
      margin: 0 10px;
    }
    .jump:hover {
      border-bottom: 1px solid #ffa500;
      color: #ffa500;
    }
  }
  .essay {
    display: flex;
    padding: 15px 0;
    // align-items: center;
    .essay-img {
      width: 220px;
      height: 162px;
      overflow: hidden;
      // padding-right: 10px;
      margin-right: 5px;
      img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .essay-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: space-between;
      .title {
        font-size: 18px;
        height: 28px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
      }
      .content {
        height: 100px;
        // margin: 12px 0;
        font-size: 14px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 6;
        overflow: hidden;
        color: #91928a;
      }
      .option {
        display: flex;
        width: 100%;
        align-items: center;
        // height: 42px;
        .left {
          flex: 1;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          font-size: 12px;
          .user {
            margin: 0 5px;
            color: #ffc15c;
          }
          .unify {
            margin: 0 5px;
            color: #9f9f9f;
          }
        }
        .right {
          width: 100px;
          text-align: right;
          color: #ffaa0f;
        }
      }
    }
  }
  .article {
    h3 {
      padding: 10px 0;
    }
    .conten {
      height: 60px;
      font-size: 14px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
      color: #91928a;
    }
    .picture {
      padding: 10px 0;
      height: 162px;
      width: 100%;
      overflow: hidden;
      display: flex;
      justify-content: space-between;
      img {
        width: 33%;
        height: 100%;
        object-fit: cover;
      }
    }
    .option {
      padding: 10px 0;
      display: flex;
      // justify-content: center;
      align-items: center;
      .left {
        flex: 1;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-size: 12px;
        .user {
          margin: 0 5px;
          color: #ffc15c;
        }
        .unify {
          margin: 0 5px;
          color: #9f9f9f;
        }
      }
      .right {
        width: 100px;
        text-align: right;
        color: #ffaa0f;
      }
    }
  }
}
</style>